<template>
  <div>
    <el-input v-model="modelValue" :type="attrs.type" :placeholder="attrs.placeholder" :clearable="attrs.clearable"
      :show-password="attrs.showPassword" :disabled="attrs.disabled" :readonly="attrs.readonly" :size="attrs.size"
      :maxlength="attrs.maxlength" :minlength="attrs.minlength" :show-word-limit="attrs.showWordLimit"
      :prefix-icon="attrs.prefixIcon" :suffix-icon="attrs.suffixIcon" :prefix="attrs.prefix" :suffix="attrs.suffix"
      :validate-event="attrs.validateEvent" :autocomplete="attrs.autocomplete" :tabindex="attrs.tabindex"
      :autofocus="attrs.autofocus" :form="attrs.form" :style="computedStyle" :class="attrs.inputClass"
      @blur="handleBlur" @focus="handleFocus" @change="handleChange" @input="handleInput" @clear="handleClear"
      @visible-change="handleVisibleChange" />
  </div>
</template>

<script setup lang="ts" name="IFormInput">
import { computed, ref, watch } from 'vue'
import Desc from './index'

interface Props {
  value?: string
  attrs?: Record<string, unknown>
  style?: Record<string, unknown>
}

const props = withDefaults(defineProps<Props>(), {
  value: '',
  attrs: () => Desc.attrs,
  style: () => Desc.style
})

const computedStyle = computed(() => {
  return {
    ...props.style,
    width: props.style?.width + 'px',
    height: props.style?.height + 'px'
  }
})

const emit = defineEmits<{
  'update:value': [value: string]
  'blur': [event: FocusEvent]
  'focus': [event: FocusEvent]
  'change': [value: string]
  'input': [value: string]
  'clear': []
  'visible-change': [visible: boolean]
}>()

const modelValue = ref(props.value)

// 监听外部值变化
watch(() => props.value, (newValue) => {
  modelValue.value = newValue
})

// 监听内部值变化
watch(modelValue, (newValue) => {
  emit('update:value', newValue)
})

// 事件处理函数
const handleBlur = (event: FocusEvent) => {
  emit('blur', event)
  if (props.attrs.onBlur && typeof props.attrs.onBlur === 'function') {
    (props.attrs.onBlur as (event: FocusEvent) => void)(event)
  }
}

const handleFocus = (event: FocusEvent) => {
  emit('focus', event)
  if (props.attrs.onFocus && typeof props.attrs.onFocus === 'function') {
    (props.attrs.onFocus as (event: FocusEvent) => void)(event)
  }
}

const handleChange = (value: string) => {
  emit('change', value)
  if (props.attrs.onChange && typeof props.attrs.onChange === 'function') {
    (props.attrs.onChange as (value: string) => void)(value)
  }
}

const handleInput = (value: string) => {
  emit('input', value)
  if (props.attrs.onInput && typeof props.attrs.onInput === 'function') {
    (props.attrs.onInput as (value: string) => void)(value)
  }
}

const handleClear = () => {
  emit('clear')
  if (props.attrs.onClear && typeof props.attrs.onClear === 'function') {
    (props.attrs.onClear as () => void)()
  }
}

const handleVisibleChange = (visible: boolean) => {
  emit('visible-change', visible)
  if (props.attrs.onVisibleChange && typeof props.attrs.onVisibleChange === 'function') {
    (props.attrs.onVisibleChange as (visible: boolean) => void)(visible)
  }
}
</script>

<style scoped lang="scss">
// 组件样式</style>
